<!-- WorkSpace page -->
<template>
  <div class="p-20">
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="关注的需求" key="1">
        <ul class="clearfix">
          <li
            class="float-left w-20 mb-20"
            v-for="(item, index) in items"
            :key="index"
          >
            <div class="work-demand border radio">
              <div class="p-10 border-bottom">
                <a-icon
                  type="star"
                  theme="filled"
                  class="fs-24"
                  style="color:#dc3545"
                />
              </div>
              <div class="fs-16 p-10 fw-bold text-truncate" :title="item.title">
                {{ item.title }}
              </div>
              <!--  -->
              <div></div>
              <div class="p-20 pb-10">
                <router-link to="/foo">
                  <a-button type="primary" class="w-100">进入需求</a-button>
                </router-link>
              </div>
              <!-- 复制链接 -->
              <div class="mb-20">
                <a-button-group class="pl-10 pr-10">
                  <a-button
                    icon="cloud"
                    title="拷贝需求链接"
                    style="padding:0 20px"
                  />
                  <a-button
                    icon="cloud-download"
                    title="拷贝需求链接"
                    style="padding:0 20px"
                  />
                  <a-button
                    icon="cloud-download"
                    title="拷贝需求链接"
                    style="padding:0 20px"
                  />
                </a-button-group>
              </div>
            </div>
          </li>
        </ul>
      </a-tab-pane>
      <a-tab-pane tab="关注的接口" key="2" forceRender>
        <div>
          关注的接口
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" src="./work-list.ts"></script>

<style lang="scss">
@import './work-list.scss';
.work-demand {
  margin: 0 15px 0 15px;
  text-align: center;
}
.work-demand:hover {
  box-shadow: 1px 1px 4px #ddd;
}
</style>
